<template>
  <div>
    <el-card style="margin-bottom: 100px">
      <h1>报价研发部-分组汇总</h1>
      <el-row>
        <el-select v-model="selectedQuarter" placeholder="请选择">
          <el-option
            v-for="(value, key) in quarterObj"
            :key="key"
            :label="key"
            :value="{ key, value }"
          >
          </el-option>
        </el-select>
        <el-button
          type="primary"
          style="margin-left: 10px"
          @click="searchGroupSummary"
          >查找
        </el-button>
      </el-row>
      <el-table
        :data="groupSummaryList"
        style="width: 100%"
        border
        stripe
        show-summary
      >
        <el-table-column prop="group_name" label="组名"></el-table-column>
        <el-table-column prop="add_num" label="新增行数汇总">
          <template v-slot="scope">
            {{ scope.row.add_num || 0 }}
          </template>
        </el-table-column>
        <el-table-column prop="remove_num" label="删除行数汇总">
          <template v-slot="scope">
            {{ scope.row.remove_num || 0 }}
          </template>
        </el-table-column>
        <el-table-column prop="total_num" label="总行数汇总">
          <template v-slot="scope">
            {{ scope.row.total_num || 0 }}
          </template>
        </el-table-column>
      </el-table>

      <h1>报价研发部-日期汇总</h1>
      <el-row>
        <el-date-picker
          v-model="selectDateSpan"
          type="daterange"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
        <el-button
          type="primary"
          style="margin-left: 10px"
          @click="searchBranchSummary"
          >查找
        </el-button>
      </el-row>
      <el-table :data="branchSummaryList" style="width: 100%" border stripe>
        <el-table-column prop="add_num" label="新增行数汇总">
          <template v-slot="scope">
            {{ scope.row.add_num || 0 }}
          </template>
        </el-table-column>
        <el-table-column prop="remove_num" label="删除行数汇总">
          <template v-slot="scope">
            {{ scope.row.remove_num || 0 }}
          </template>
        </el-table-column>
        <el-table-column prop="total_num" label="总行数汇总">
          <template v-slot="scope">
            {{ scope.row.total_num || 0 }}
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import {
  codeCountListByBranchId,
  getBranchSummaryByBranchId,
  getGroupSummaryByBranchId,
  getQuarterList,
} from '@/api/codeCount';
import dayjs from 'dayjs';

export default {
  name: 'codeCountSummary',

  data() {
    return {
      specQuarterSummaryList: [],
      groupSummaryList: [],
      totalPageNum: 0,
      curPageNum: 0,
      quarterObj: {},
      selectedQuarter: null,
      pageSize: 10,

      selectDateSpan: null,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 1000 * 3600 * 24;
        },
      },
      branchSummaryList: [],
    };
  },
  created() {
    this.getQuarterList();
  },

  methods: {
    async getQuarterList() {
      let res = await getQuarterList();
      console.log('getQuarterList --> ', res);
      this.quarterObj = res;
    },
    formateDate(date) {
      return new dayjs(date).format('YYYY-MM-DD');
    },
    codeCountList(pageNum, startDate = null, endDate = null) {
      codeCountListByBranchId({
        pageSize: this.pageSize,
        pageNum,
        startDate,
        endDate,
        branchId: 1,
      }).then((res) => {
        console.log('codeCountListByBranchId --> ', res);
        const { countList, total } = res;
        this.specQuarterSummaryList = countList;
        this.totalPageNum = total;
      });
    },

    searchGroupSummary() {
      if (this.selectedQuarter !== null) {
        const { key } = this.selectedQuarter;

        this.getGroupSummaryByBranchId(key);
      } else {
        this.$message.error('搜索时，必须指定季度');
      }
    },

    async getGroupSummaryByBranchId(quarter) {
      this.groupSummaryList = await getGroupSummaryByBranchId({
        branchId: 1,
        quarter,
      });
    },
    async searchBranchSummary() {
      if (this.selectDateSpan !== null) {
        const [startNyrDate, endNyrDate] = this.selectDateSpan;

        const res = await getBranchSummaryByBranchId({
          branchId: 1,
          startNyrDate,
          endNyrDate,
        });
        this.branchSummaryList = [res];
      } else {
        this.$message.error('搜索时，必须指定时间范围');
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
